<!DOCTYPE html>
<html>

	<head>
		<title>链接</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<script type="text/javascript" src="bootstrap-paginator.js"></script>
		<script>
			$.ajax({
				url:'login.php',
				type:'post',
			    dataType:'json',
			    success:function(datas){
			    	if(datas.code == 1){
			    		$('.usernames').html(datas.data.username);
			    	}else{
                        alert(datas.msg);
                        window.location.href = "personaLogin.html";
			    	}
			    }
			})
			function goOther(url){
				// console.log(url);
				top.rightFrame.location.href = 'example3.html'+url;
			}
			
		</script>
	</head>
		<style>
			
			.row{
				margin-bottom: 15px;
			}
			.login{margin:20px auto;box-shadow: 0 0 10px #ccc;padding:10%;}
			.logins{width:100% !important;margin:20px auto !important;display: block;}
			.container li{cursor: pointer;list-style: none;}
			.loginstatus{width: 100%;padding: 10px;font-size: 20px;font-weight: bold;}
			.newslist,.newslist ul{width: 100%;padding:0 !important;margin:0 !important;}
			.newslist ul li{
				width:100%;
				border-bottom: 1px solid #ccc;
				overflow: hidden;
				padding:5px;
			}
			.loginout{
				display: inline-block;
				padding:5px 8px;
				background-color: #3385ff;
				color: #fff;
				font-size: 15px;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				-ms-border-radius: 4px;
				margin-left: 10px;
				cursor: pointer;
			}
			.myCollection{
				width:100%;
			}
			.myCollection ul{
				padding:0 !important;
			}
			.myCollectionul,.myCollection>ul>li{
				width: 100%;
				overflow: hidden;
			}
			.myCollection>ul>li{
				/*border-bottom: 1px solid #ccc;*/
				margin:1px 0;
			}
			.myCollection>ul>li>span{
				display: block;
				width: 100%;
				background: rgba(0,0,0,.5);
				color: #fff;
				text-align: center;
				padding: 10px 0;
			}
			.inputbtm{
				border-bottom-color:#eee !important;
			}
			.listitem,.newslist ul li input{
				width:54%;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				height: 30px;
				line-height: 30px;
				float: left;s
			}
			.newslist ul li input{
				display: none;
			}
			.bj,.bj1{
				display: inline-block;
				padding:5px;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				-ms-border-radius: 4px;
				background-color: #3385ff;
				color: #fff;
				margin:0 4px;
			}
			.tanc{
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,.4);
				position: fixed;
				top:0;
				left: 0;
				z-index: 100;
				display: none;
			}
			.tccontent{
				width:90%;
				padding:20px 6px;
				overflow: hidden;	
				background-color: #fff;	
				position: fixed;
				top: 30%;
				left: 50%;
				margin-left: -45%;
				border-radius: 2px;
				-webkit-border-radius: 2px;
				-moz-border-radius: 2px;
				-ms-border-radius: 2px;
				padding-top: 40px;
			}
			.tccontent input{
				float: left;
				width: 80%;
				border:none;
				border-bottom: 1px solid #ccc;
			}
			.tccontent span{
				float: right;
				padding:2px 4px;
				color: #fff;
				background-color: #3385ff;
				border-radius: 2px;
				-webkit-border-radius: 2px;
				-moz-border-radius: 2px;
				-ms-border-radius: 2px;
			}
			.tccontent i{
				color: #000;
				font-style: normal;
				font-size: 26px;
				position: absolute;
				left: 2px;
				top:-6px;
				cursor: pointer;
			}
			.myCollection div.title,.titles{
				width:100%;
				height: 30px;
				line-height: 30px;
				text-align: center;
				background-color: rgba(0,0,0,.5);
				color: #fff;
				font-size: 15px;
				cursor: pointer;
			}
			.btns{
				float: right;
			}
			.current{
				background: #3385ff !important;
				color:#fff !important;
			}
			.surecontent{
				cursor: pointer;
			}
			.searchbox{
				width: 100%;
				padding:10px 0;
				/*overflow: hidden;*/
				background-color: #eee;
				position: relative;
			}
			.searchlist{
				position: absolute;
				top:40px;
				left: 50%;
				margin-left: -45%;
				width: 90%;
				padding:10px;
				background-color: #fff;
				box-shadow: 0 6px 10px #ccc;
				display: none;
			}
			.searchlist h3{
				width: 100%;
				height: 30px;
				line-height: 30px;
				background-color: #eee;
				color: #000;
				font-size: 15px;
				padding-left: 10px;
			}
			.searchlist ul{
				width: 100%;
				padding:0 !important;
			}
			.searchlist ul li{
				width: 100%;
				overflow: hidden;
				padding:10px;
				border-bottom: 1px solid #ccc;
			}

			.searchbox input{
				display: inline-block;
				width: 77%;
				margin-left: 12px;
				height: 30px;
				line-height: 30px;
			}
			.searchbox>span{
				display: inline-block;
				padding:5px;
				border-radius: 4px;
				-webkit-border-radius: 4px;
				-moz-border-radius: 4px;
				-ms-border-radius: 4px;
				background-color: #3385ff;
				color: #fff;
				margin:0 4px;
			}
			.searchbtn{
				cursor: pointer;
			}
			.slideUl::-webkit-scrollbar{
				/*display: none;*/
				/*width: 5px;
				height: 10px*/
				
			}
			body::-webkit-scrollbar{
				display: none;
			}
			.slideUl{
				display: none;
				height: 120px;
				overflow-x: hidden;
				overflow-y: auto;
			}
			.slideUl li{
				overflow:hidden;
				border-bottom: 1px solid #ccc;
				padding:4px 0;
			}
			.slideUl li span.bj3{
				display: block;
				width:80%;
				float: left;
				height: 30px;
				line-height: 30px;
				text-overflow: ellipsis;
				overflow:hidden;
				white-space: nowrap;
				padding-left:4px; 
			}
			/*.slideUl li span.bj3:hover{
				background: #3385ff;
				color:#fff;
				cursor: pointer;
			}*/
			.colorbgs{
				background: #3385ff !important;
				color:#fff !important;
			}
			.bj12{
				float: right;
				width: 57px !important;
				height: auto !important;
				line-height: auto !important;
				padding:3px 0;
				background: #3385ff;
				color: #fff;
				border-radius: 4px;
				text-align: center;
			}
			.bj12:hover,.myCollection>ul>li>span,.slideUl li{
				cursor: pointer;
			}
		</style>
	<body>

		<!-- 编辑弹窗 start -->
		<div class="tanc">
			<div class="tccontent">
				<i onclick="closebox()">×</i>
				<input class="tcinput" type="" name="" value='' placeholder="请输入修改内容" />
				<span class="surecontent">确定</span>
			</div>
		</div>
		<!-- 编辑弹窗 end -->
		<div class="loginstatus">用户名： <span class="usernames"></span><span class="loginout" onclick="logout()">退出登录</span></div>
		<!-- 搜索框 start -->
		<div class="searchbox">
			<input type="" name="" placeholder="请输入搜索内容">
			<span class="searchbtn">搜索</span>
			<div class="searchlist">
				<h3>以下是搜索内容</h3>
				<ul>
					<li>
						<span onclick="goOther(url)">内容1</span>
					</li>
					<li>
						<span onclick="goOther(url)">内容2</span>
					</li>
					<li>
						<span onclick="goOther(url)">内容3</span>
					</li>
					<li>
						<span onclick="goOther(url)">内容4</span>
					</li>
				</ul>
			</div>
		</div>
		<!-- 搜索框 end -->
		<div class="container newslist">
			<div class="titles scbox"><<点击查看我的收藏>></div>
			<ul class="myColbox" style="display: none;">
				<li>
					<span class="listitem" onclick="goOther(url)" title="我的收藏内容1">我的收藏内容1</span>
					<!-- <input type="" name="" value='请输入修改内容，点击编辑结束' /> -->
					<div class="btns">
						<span class="bj" id="0" onclick="bianji(this)">编辑</span>
						<span class="bj1" onclick="deleteCon(this)">刪除</span>
					</div>
				</li>
				<li>
					<span class="listitem" onclick="goOther(url)" title="我的收藏内容2">我的收藏内容2</span>
					<div class="btns">
						<span class="bj" id="1" onclick="bianji(this)">编辑</span>
						<span class="bj1" onclick="deleteCon(this)">刪除</span>
					</div>
				</li>
			</ul>
		</div>
		<div class="myCollection">
			<!-- <div class="title"><<内容列表>></div> -->
			<ul>
				<li>
					<span>列表内容标题1</span>
					<div class="slideUl">
						<ul>
							<li><span class="bj3">标题内容1</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容2</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容3</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容4</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容5</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容5</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容5</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容5</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容5</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容5</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容5</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容5</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容5</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
						</ul>
					</div>
				</li>
				<li>
					<span>列表内容标题2</span>
					<div class="slideUl">
						<ul>
							<li><span class="bj3">标题内容1</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容2</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容3</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容4</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容5</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
						</ul>
					</div>
				</li>
				<li>
					<span>列表内容标题3</span>
					<div class="slideUl">
						<ul>
							<li><span class="bj3">标题内容1</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容2</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容3</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容4</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
							<li><span class="bj3">标题内容5</span><span class="bj12" onclick="shoucang(this)">收藏</span></li>
						</ul>
					</div>
				</li>
			</ul>
		</div>
		
        <br>
	    <div class="row" style="cursor: pointer;">
	        <div class="col-md-12">
	            <div class="portlet">
	                <div id="htmlDiv"></div>
	                <div class="col-lg-12" align="center">
	                    <!-- 分页控件，标签必须是<ul> -->
	                    <ul id="pageButton"></ul>
	                </div>
	            </div>
	        </div>
	    </div>
		<script type="text/javascript">
			// var limit = 10; 
			// getpage(1);
	  //       function getpage(page){	
			// 	$.ajax({
			// 		url:'list.php',
			// 		type:'post',
			// 		data:{
			// 			'page':page,
			// 			'limit':limit
			// 		},
			// 		dataType:'json',
			// 		success:function(data){
			// 			if(data.code == 1){
			// 				var count = Math.ceil(data.count/limit);
			// 				if(count == 1){
   //                              $('.row').hide();
			// 				}
			// 				$('.container>ul').find('li').remove();
			// 				$.each(data.data,function(i,val){
			// 					$('.login').hide();
			// 					$('.container>ul').append("<li><span onclick=\"goOther('"+'?id='+val.id+"')\">"+val.title+"</span></li>");	 
			// 				});

			// 				var element = $('#pageButton');
			// 				var options = {
		 //                    bootstrapMajorVersion : 3,
		 //                    currentPage : page, // 当前页数
		 //                    numberOfPages : 5, // 显示按钮的数量
		 //                    totalPages : count, // 总页数
		 //                    numberOfPages:limit, 
		 //                    itemTexts : function(type, page, current) {
		 //                        switch (type) {
		 //                        case "first":
		 //                            return "首页";
		 //                        case "prev":
		 //                            return "上一页";
		 //                        case "next":
		 //                            return "下一页";
		 //                        case "last":
		 //                            return "末页";
		 //                        case "page":
		 //                            return page;
		 //                        }
		 //                    },
		 //                    // 点击事件，用于通过Ajax来刷新整个list列表
			// 	            onPageClicked : function(event, originalEvent, type, page) {
			// 	                getpage(page);
			// 	            }
			// 	            };
			// 	             element.bootstrapPaginator(options);
			// 			}else{
			// 				alert(data.msg);
			// 			}
			// 		}
			// 	})
		 //    }	
		 // 以上是分页的代码
		 		// $('.bj').click(function(){
		 		// 	$('.tanc').show();
		 		// 	var ids = $(this).attr('id');
		 			// $('.surecontent').click(function(){
		 			// 	var inpval = $('.tcinput').val();
		 			// 	alert(ids);
		 			// 	$('.listitem').eq(ids).html(inpval);
		 			// 	$('.tanc').hide();
		 			// 	$('.tcinput').val();
		 			// })
		 		// });
		 		// 编辑修改标题的内容 start
		 		var ids = '';
		 		function bianji(id){
		 			$('.tanc').show();
		 			ids = $(id).attr('id');
		 		}
		 		$('.surecontent').click(function(event){
 					event.stopPropagation();
	 				var inpval = $('.tcinput').val();
	 				$('.listitem').eq(ids).html(inpval);
	 				$('.tcinput').val('');
	 				$('.tanc').hide();
	 			})
		 		$('.searchbtn').click(function(){
		 			if($('.searchlist').css('display') == 'none'){
		 				$('.searchlist').show();
		 			}else{
		 				$('.searchlist').hide();
		 			}
		 		})
				// 编辑修改标题的内容 end
				// 收藏 start
				function deleteCon(id){
					$(id).parent().parent('li').remove();
				}
				function shoucang(id){
					var myCollection = $(id).siblings('.bj3').html();
					$(id).html('已收藏');
					$(id).css({'background':'#bbb'});
					var html = '';
						html += '<li>';
						html += '<span class="listitem" onclick="goOther(url)" title="我的收藏内容2">'+myCollection+'</span>';
						html += '<div class="btns">';
						html += '<span class="bj" id="1" onclick="bianji(this)">编辑</span>';
						html += '<span class="bj1" onclick="deleteCon(this)">刪除</span>';
						html += '</div>';
						html += '</li>';
						$('.myColbox').append(html);
				}
				// 显示编辑弹窗 start
		 		function closebox(){
		 			$('.tanc').hide();
		 		}
		 		// 显示编辑弹窗 end
		 		// 弹出层 start
		 		$('.scbox').click(function(){
		 			$('.myColbox').slideToggle();
		 		})
				// 退出登录
				function logout(){
					window.location.href="loginout.php";
				}

				$('.myCollection>ul>li>span').click(function(){
					$(this).siblings('.slideUl').slideToggle();
				})

				$('.slideUl>li').click(function(){
					$(this).find('span').addClass('colorbgs').parent().siblings().find('span').removeClass('colorbgs');
				})
		</script>
	</body>

</html>